<template>
    <div class="common-layout">
        <el-container>
            <el-main>
                <div class="common-layout song-details" v-for="item in songInfo?.songs" :key="item.id">
                    <el-container>
                        <el-aside >
                            <el-image style="width: 300px; border-radius: 50%; object-fit: contain;"
                                :src="item?.al?.picUrl"></el-image>
                        </el-aside>
                        <el-main>
                            <p>歌名:{{ item?.name }}</p>
                            <p>专辑名:{{ item?.al?.name }}</p>
                            <p>发布时间:{{ timestampToTime(item?.publishTime) }}</p>
                            <p>歌曲时长:{{ msToTime(item?.dt) }}</p>
                            <p>类型:{{ item?.originCoverType === 0 ? '未知' : item?.originCoverType === 1 ? '原曲' : '翻唱' }}</p>
                            <p v-for="child in item?.ar" :key="child?.id"> 作者:{{ child?.name }}</p>
                        </el-main>
                    </el-container>
                </div>
                <el-space>
                    <el-image class="user-avatar" :src="userInfo.avatarUrl"></el-image>
                    <el-input class="comment-textarea" 
                    :autosize="{ minRows: 3, maxRows:10 }"
                     maxlength="30"
                    placeholder="万水千山总是情,评论一下行不行~" 
                    show-word-limit 
                    v-model="userComment" type="textarea" />
                </el-space>
                <el-button type="success" @click="getUserComment">评论</el-button>
                <el-space>
                    <h3>评论</h3><strong>共{{ commentData.total }}条评论</strong>
                </el-space>
                <el-divider border-style="double" />
                <h4 style="color: red;">热门评论</h4>
                <div class="comment-container" v-for="item  in commentData.hotComments" :key="item.commentId">
                    <el-space>
                        <el-avatar :src="item.user.avatarUrl" shape="square"></el-avatar>
                        <el-link type="info">{{ item.user.nickname }}：</el-link>
                        <p class="comment-content">{{ item.content }}</p>
                    </el-space>
                    <el-space class="location-timestr">
                        位置:<span>{{ item.ipLocation.location }}</span>
                        发布时间:<span>{{ item.timeStr }}</span>
                    </el-space>
                    <el-divider border-style="double" />
                </div>
                <el-divider border-style="double" />
                <h4>精彩评论</h4>
                <div class="comment-container" v-for="item  in commentData.comments" :key="item.commentId">
                    <el-space>
                        <el-avatar :src="item.user.avatarUrl" shape="square"></el-avatar>
                        <el-link type="info">{{ item.user.nickname }}：</el-link>
                        <el-image class="vipImg" v-if="item.user.vipRights" :src='item.user.vipRights.associator?.iconUrl'>
                        </el-image>
                        {{ item.content }}
                    </el-space>
                    <el-space class="location-timestr">
                        位置:<span>{{ item.ipLocation.location }}</span>
                        发布时间:<span>{{ item.timeStr }}</span>
                    </el-space>
                    <el-divider border-style="dashed" />
                </div>

            </el-main>
            <el-aside>
                <div v-show="simiSongData">
                    <h2>相似歌曲</h2>
                    <el-aside v-for="item in simiSongData" :key="item?.id">
                        <el-space>
                            <el-image style="width: 50px;" :src="item?.album?.picUrl"></el-image>
                            <el-link :href="item?.mp3Url">{{ item?.name }}</el-link>
                        </el-space>
                    </el-aside>
                </div>
            </el-aside>
        </el-container>
    </div>
</template>

<script>
import { mapState } from 'vuex'
import { commentMusicInterface, setCommentInterface } from '@/api/comment'
import { songDetailsInterface, simiSongInterface } from '@/api/artist'
import { timestampToTime } from '@/utils/date'
import { msToTime } from '@/utils/msToTime'
export default {
    data() {
        return {
            songId: '',
            commentData: '',
            userComment: '',
            songInfo: '',
            simiSongData: '',
            timestampToTime,
            msToTime
        }
    },
    computed: {
        ...mapState('userInfoModule', ['userInfo'])
    },
    methods: {
        getUserComment() {
            setCommentInterface({
                t: 1,
                type: 0,
                id: this.songId,
                content: this.userComment
            }).then(res => res.code === 200 && ElMessage.success('评论成功!'))

        },
        getCommentList(id) {
            commentMusicInterface({ id }).then(res => {
                this.commentData = res
            })
        },
        getSongDetails(ids) {
            songDetailsInterface({ ids }).then(res => {
                this.songInfo = res;
                console.log(res);
            })
        }
    },
    created() {
        simiSongInterface({ id: this.$route.params.songId }).then(res => {
            this.simiSongData = res?.songs;
            // console.log(this.simiSongData);
        })
        this.songId = this.$route.params.songId
        this.getCommentList(this.songId)
        this.getSongDetails(this.songId)
    }
}
</script>

<style lang="scss" scoped>
.el-space {
    display: flex;
}

.el-space,
.el-space--horizontal,
.comment-container {
    font-size: 14px;
}

.vipImg {
    width: 50px;
    object-fit: contain;
}

.user-avatar {
    width: 50px;
    object-fit: contain;
}

.comment-textarea {
    width: 800px;
}

.location-timestr {
    justify-content: flex-end;
}
.song-details section{
    align-items: center;
    gap: 50px;
}
</style>
